import React from 'react'
import './TodoFooter.css'
export default function TodoFooter(props) {
    //解构
    let { checkAllTodo, todolists, clearAlltodos } = props;
    //声明事件函数
    let checkAll = e => {
        // console.log(e.target.checked)
        //调用函数
        checkAllTodo(e.target.checked);
    }
    let clearAllDonetodo = () => {
        //调用
        clearAlltodos();
    }
    let test = () => {
        let arr = [3, 5, 6, 1, 8, 9];
        //要求：检测数组中的每一个元素是否都是偶数
        let result = arr.every(item => {
            //只要是数组中的元素发现有不满足条件的即结果为false，后面即使还有满足条件的将不在检测
            return item % 2 === 0;
        })
        console.log(result);
    }
    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox" onChange={checkAll} checked={todolists.every(item => item.done) && todolists.length > 0} />
            </label>
            <span>
                <span>已完成{todolists.filter(item => item.done).length}</span> / 全部{todolists.length}
            </span>
            <button className="btn btn-danger" onClick={clearAllDonetodo}>清除已完成任务</button>
            <button onClick={test}>测试数组中的every方法</button>
        </div>
    )
}
